<!--
  -    报事报修管理
  - Author: lengleng (wangiegie@gmail.com)  :permission="permissionList"
-->
<template>
  <div class="execution">
    <basic-container>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left:10px;">
        <el-tab-pane label="未完成" name="0">
        </el-tab-pane>
        <el-tab-pane label="已完成" name="1">
        </el-tab-pane>
      </el-tabs>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="emptyChange"
        :search.sync="searchForm">
        <template
          slot="search"
          slot-scope="{row,size}">
          <el-col :span="6">
            <el-form-item
              label="报修日期"
              label-width="100px">
              <el-date-picker
                v-model="createDates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </template>
        <template
          slot="menuLeft"
          slot-scope="scope">
          <el-button
            v-if="repair_rmproject_add"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="addOrUpdateHandle('add','')">
            新增
          </el-button>
          <el-button
            v-if="repair_rmproject_add"
            class="filter-item"
            icon="el-icon-download"
            @click="exportFile()">
            导出
          </el-button>
        </template>
        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            v-if="repair_rmproject_get"
            type="text"
            @click="handleView('view',scope.row.id)">查看</el-button>
          <el-button v-if="scope.row.serviceStatus==1" type="text" @click="openDialog(scope.row)">下工单</el-button>
          <el-button v-if="scope.row.serviceStatus==1" type="text" @click="rowDel(scope.row)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <!--新增-->
    <table-form
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="refreshDataList"
    ></table-form>
    <!--查看-->
    <table-forms
      v-if="viewVisible"
      ref="viewBtn"
      @refreshDataList="getList"
    ></table-forms>

    <!--下工单-->
    <el-dialog
      title="下工单"
      width='25%'
      :visible.sync="dialogTermination"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="formT">
        <el-form-item
          label="处理人员"
          :label-width="formLabelWidth"
        >
          <!-- <el-input
            v-model="formT.receiverId"
            placeholder="请选择"
          ></el-input> -->
          <el-select v-model="formT.receiverId">
            <el-option
              style="width：100%;"
              v-for="(item,index) in receiverIdOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
          :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="formT.stopRemark"
            placeholder="请填写备注"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogTermination = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          icon='el-icon-circle-check'
          type="primary"
          @click="onTermination()"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj
} from '@/api/market/repair/repair/cs_service'
import {
  tableOption
} from '@/const/crud/market/repair/repair/cs_service'
import { getWorkOrderByType, ExportFile } from '@/api/common.js'
import TableForm from './Form'
import TableForms from './FormModify'
import {
  mapGetters
} from 'vuex'


export default {
  name: 'repair',
  components: {
    TableForm,
    TableForms
  },
  data () {
    return {
      searchForm: {},
      tableData: [],
      activeName: '0',
      formLabelWidth: '80px',
      dialogTermination: false,
      addOrUpdateVisible: false,
      viewVisible: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      repair_rmproject_get: false,
      repair_rmproject_add: false,
      repair_rmproject_edit: false,
      repair_rmproject_del: false,
      repair_rmproject_adds: true,
      repair_cscustomerservice_placeworkorder: false,
      formT: {
        id: '',
        stopDate: '',
      },
      receiverIdOptions: [],
      createDates: []
    }
  },
  created () {
    this.repair_rmproject_get = this.permissions['repair_cscustomerservice_get']
    this.repair_rmproject_add = this.permissions['repair_cscustomerservice_add']
    this.repair_rmproject_edit = this.permissions['repair_cscustomerservice_edit']
    //this.repair_rmproject_adds = this.permissions['repair_cscustomerservice_edit']
    this.repair_rmproject_del = this.permissions['repair_cscustomerservice_del']
    this.repair_cscustomerservice_placeworkorder = this.permissions['repair_cscustomerservice_placeworkorder']
  },
  computed: {
    ...mapGetters(['elements', 'permissions'])
  },
  methods: {
    exportFile () {
      if (this.createDates.length > 0) {
        this.searchForm.startDate = this.createDates[0]
        this.searchForm.endDate = this.createDates[1]
      }

      this.searchForm.searchFinished = this.activeName != '0'
      this.searchForm.isServiceOrder = false

      ExportFile("/repair/cscustomerservice/outputService", this.searchForm)
    },
    emptyChange () {
      this.createDates = []
      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
    },
    handleClick (tab, event) {
      //tab切换历史记录,加载数据
      this.getList(this.page)
    },
    refreshDataList () {
      this.getList(this.page)
    },
    getList (page, params) {
      this.tableLoading = true
      if (this.createDates.length > 0) {
        this.searchForm.startDate = this.createDates[0]
        this.searchForm.endDate = this.createDates[1]
      }

      this.searchForm.searchFinished = this.activeName != '0'
      this.searchForm.isServiceOrder = false

      fetchList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    openDialog: function (row) {
      this.formT = this.$options.data().formT
      this.dialogTermination = true;
      this.formT.id = row.id;
      getWorkOrderByType().then((data) => {
        this.receiverIdOptions = data.data.data
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    // 查看
    handleView: function (method, id) {
      this.viewVisible = true
      this.$nextTick(() => {
        this.$refs.viewBtn.init(method, id)
      })
    },
    // 新增、修改
    addOrUpdateHandle (isEdit, id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(isEdit, id)
      })
    },
    //下工单
    onTermination () {
      // this.$message.success("开发中")
      if (!this.formT.receiverId) {
        this.$message.warning("请选择处理人员")
        return
      }
      this.loading = true
      this.$http({
        url: `/repair/cscustomerservice/placeworkorder`,
        method: 'post',
        data: this.formT
      }).then(({ data }) => {
        if (data.data) {
          this.dialogTermination = false;
          this.$message.success('工单下发成功')
          this.getList(this.page)
          //this.$emit('refreshDataList')
        }
        this.loading = false
      })

    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.getList(this.page)
    },
    currentChange (current) {
      this.page.currentPage = current
      this.getList(this.page)
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange () {
      this.getList(this.page)
    }
  }
}
</script>
<style>
/* #tab-first {
  font-size: 18px !important;
}

#tab-second {
  font-size: 18px !important;
}

#tab-third {
  font-size: 18px !important;
} */
</style>
